
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        .class{font-size: 20px ;color: red}
        .class1{font-size: 15px;color: grey}
        #fifth{
            width:344px;
            font-size: 5px;
            margin-left:400px;
        }
        body{margin:0;padding:0;}
        ul{margin:0px;padding:0px;}
        li{
            list-style:none;
        }
        a:link{
            text-decoration:none;
            color:#000;
        }
        a:visited{
            text-decoration:none;
            color:#000;
        }
        a:hover{
            text-decoration:none;
            color:#000;
        }
        a:active{
            text-decoration:none;
            color:#000;
        }
        .clearfix:before,.clearfix:after{
            display:table;
            content:"";
        }
        .clearfix:after{
            clear:both;
        }
        .clearfix{
            *zoom:1;
        }
        #div{position:absolute;z-index:0;background:#fff;border: 1px solid darkorange;width: 552px;margin-left:334px;margin-top:44px;}
        .wrap{width:960px;margin:0 auto;}
        .wrap .top{height:30px;background:#eee;}
        .wrap .top .top-left{float:left; font-size: 5px;margin-top:7px;}
        .wrap .top .top-right{float:right;font-size: 5px;margin-top:7px;}
        .wrap .content{margin-top:20px;}
        .wrap .content .logo{width:214px;height:63px;float:left;background:url("img/taobao.jpg") no-repeat;margin-left:20px;}
        .wrap .content .search{float:left;width:510px;margin-left:150px;margin-top:10px;margin-bottom:10px;}
        .wrap .content .search .search-1{border-color:sandybrown;outline: none;width:500px;height:30px;border:2px solid #ff4200;margin-left: -50px}
        .wrap .content .search .search-2{border-color:sandybrown;outline: none;width:50px;height:35px;margin-left:-8px;background:#ff4200;border:none;}
        .shop{width:900px;margin:0 auto;}
        .shop-left{float:left;width:420px;height:420px;border:1px solid #ccc;}
        .shop-left img{width:420px;height:420px;}
        .shop-right{float:right;width:440px;}
        .right1{margin-bottom:10px;}
        .right2{width:100%;height:95px;padding-left:5px;background:#eee;border:1px solid #ccc;}
        .right2 p{margin-top:30px;color:#999;}
        .right2 span{font-size:25px;color:red;}
        .right3{margin-left:5px;font-size:14px;color:#999;margin-bottom:10px;}
        .right4{width:100%;height:50px;border-top:1px dashed #ccc;border-bottom:1px dashed #ccc;}
        .right4 li{float:left;width:140px;height:25px;border-right:1px dashed #ccc;text-align:center;margin-top:15px;}
        .right4 .li3{border:none;}
        .right5{width:230px;margin-top:10px;}
        .right5 span{margin-left:5px;}
        .right5 ul{float:right;}
        .right5 li{float:left;width:30px;height:20px;border:1px solid #ccc;margin-right:10px;text-align:center;line-height:20px;cursor:pointer;}
        .right6{margin-left:5px;margin-top:15px;}
        #btn1,#btn2{width:30px;height:25px;border:none;}
        #text{width:30px;}
        .right7{margin-top:70px;margin-left:80px;}
        .right7 li{float:left;width:130px;height:25px;margin-right:20px;text-align:center;line-height:25px;cursor:pointer;}
        .right7 .li1{border:1px solid #f00;background:pink;color:#f00;}
        .right7 .li2{border:1px solid #f00;background:#f00;color:#fff;}
        .wrap .content .logo{width:214px;height:63px;float:left;background:url("taobao_03.jpg") no-repeat;margin-left:20px;}
        .active{border: 1px solid red}

    </style>

    <script type="text/javascript">
        window.onload=function () {
            var number = 0;
            var size;
            var div = document.getElementById("div")
            // var xhr = new XMLHttpRequest()
            var chima = document.getElementById("chima");
            var aLi = chima.getElementsByTagName("li");
            var btn1 = document.getElementById("btn1");
            var text = document.getElementById("text");
            var btn2 = document.getElementById("btn2");
            var insert = document.getElementById("insert");
            var str = "";

            // window.onload = function () {

//                if (xhr.readyState === 4&&inputtext.value!="") {
//                    div.innerHTML = xhr.responseText
//                }
//                else
//                    div.innerHTML = "";
//            }
            btn1.onclick = function(){
                text.value--;
                if(text.value<=0){
                    text.value=0;
                }
                number = text.value

            }
            btn2.onclick = function(){
                text.value++;
                if(text.value>=100){
                    text.value=100;
                }
                number = text.value
            }

            for(var i=0;i<aLi.length;i++){
                aLi[i].index=i;
                aLi[i].onclick = function(){
                    size = aLi[this.index].innerHTML
//                    size.style.color = "#f00";
                    console.log(size)
                    //alert(aLi[this.index].innerHTML)
                }
            }
            insert.onclick = function () {
                if (number == 0){
                    number = 1
                }
//                console.log(number)
//                console.log(size)
                var xhr =  new  XMLHttpRequest();
                xhr.open("post","/fuzhuang")
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
                xhr.send("id=1&number="+"'"+number+"'"+"&size="+"'"+size+"'")
            }
        }
    </script>

</head>

<body>
<div class="wrap">
    <div class="top clearfix">
        <div class="top-left">

            <a href="zhuce.html">免费注册</a>
        </div>
        <div class="top-right">
            <a href="loading.html">优衣库主页</a>
            <a href="#">我的购物车</a>
            <a href="zhuye.html">退出</a>
        </div>
    </div>
    <div class="content clearfix">
        <div class="logo"></div>
    </div>
    <div class="shop clearfix">
        <div class="shop-left"><img src="服装_13.jpg"></div>
        <div class="shop-right">
            <div class="right1"><span>短款小棉袄宽松棉衣女2017冬装新款韩版女装外套大毛领羽绒棉服冬</span></div>
            <div class="right2"><p>淘宝价:<span>￥199.00</span></p></div>
            <div class="right3"><p>配送:<span>全国包邮</span></p></div>
            <div class="right4 clearfix">
                <ul>
                    <li>月销量<span>280</span></li>
                    <li>累计评价<span>280</span></li>
                    <li class="li3">送天猫积分<span>13</span>起</li>
                </ul>
            </div>
            <div class="right5 clearfix">
                <span>尺码:</span>
                <ul id="chima">
                    <li>S</li>
                    <li>M</li>
                    <li>L</li>
                    <li>XL</li>
                </ul>
            </div>
            <div class="right6">
                <span>数量:</span>
                <input type="button" value="-" id="btn1">
                <input type="text" value="1" id="text">
                <input type="button" value="+" id="btn2">
            </div>
            <div class="right7 clearfix">
                <ul>
                    <li class="li1" id="insert">加入购物车</li>
                    <li class="li2">立即购买</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>


</html>
